<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="fn" ref="btn-ref">我是一个按钮</button>
        <div ref="myDiv">{{str}}</div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            a:1,
            b:2,
            str:"今天 天气不错！"
        },
        methods:{
            fn(){
                // 状态的更新是同步的，视图的更新是异步的。（将所有的状态更新完毕之后会更新视图）
                // this.str = "明天应该有雨！";// 更新的是状态
                // console.log(this.str);// "明天应该有雨！
                // console.log(this.$refs.myDiv.innerText);// 今天 天气不错！


                // this.str="明天应该有雨";
                // this.$nextTick(function(){
                //     console.log(this.$refs.myDiv.innerText);// 明天应该有雨
                // })

                // this.$nextTick(function(){
                //     console.log(this.$refs.myDiv.innerText);// 今天 天气不错！
                // })
                // this.str="明天应该有雨";


                // this.str="明天应该有雨1";
                // this.$nextTick(function(){
                //     console.log(this.$refs.myDiv.innerText);// 明天应该有雨2！
                // })
                // this.str="明天应该有雨2";

                // this.a = 100;
                // this.$nextTick(function(){
                //     console.log(this.$refs.myDiv.innerText);// 今天 天气不错！！
                // })
                // console.log(1111)
                // this.str="明天应该有雨2";



                // const p = this.$nextTick();
                // p.then(value=>{
                //     // console.log(value===this);// true
                //     console.log(this.$refs.myDiv.innerText);// 今天 天气不错！！
                // })


                // this.str = "明天应该有雨！"
                // const p = this.$nextTick();
                // p.then(value=>{
                //     // console.log(value===this);// true
                //     console.log(this.$refs.myDiv.innerText);// 明天应该有雨！！
                // })



                // const p = this.$nextTick();
                // p.then(value=>{
                //     // console.log(value===this);// true
                //     console.log(this.$refs.myDiv.innerText);// 明天应该有雨！！
                // })
                // this.str = "明天应该有雨！"

                // this.a = 1;
                // const p = this.$nextTick();
                // p.then(value=>{
                //     // console.log(value===this);// true
                //     console.log(this.$refs.myDiv.innerText);// 明天应该有雨！！
                // })
                // this.str = "明天应该有雨！"


                // this.str = "明天应该有雨1！"
                // const p = this.$nextTick();
                // p.then(value=>{
                //     // console.log(value===this);// true
                //     console.log(this.$refs.myDiv.innerText);// 明天应该有雨！！
                // })
                // this.str = "明天应该有雨2！"


                const p = this.$nextTick();
                p.then(value=>{
                    // console.log(value===this);// true
                    console.log(this.$refs.myDiv.innerText);// 明天应该有雨！！
                })


                // 总结：1- 数据状态如果与视图进行绑定，数据状态一旦更新会异步更新视图。
                //      2- this.$nextTick所指定的回调函数也是异步的


            }
        },
        created(){
            // console.log("created",this.$refs);
            this.$nextTick(()=>{
                this.$refs["btn-ref"].innerText = "你好";
            })

        },
        mounted(){
            // console.log("mounted",this.$refs["btn-ref"]===document.querySelector("button"));
        }
    })
</script>
</html>